<template>
	<view>
		<view class="Long">
			<wly-tabnav ref="tabnav" :fixed="true" :tabnav="tabnav" @ontype_='ontype'></wly-tabnav>
			<view class="search" @click="search"></view>
			<view class="qie">
				<view class="nan" @click="whole" :class="{type:ys1,type2:ys2}" >男</view>
				<i class="xiang">/</i>
				<i class="nv" @click="whole" :class="{type:ys2,type2:ys1}">女</i>
			</view>
		</view>
		<view class="ko"></view>
		<mhuan v-if="type == '0'"></mhuan>
		<shu v-if="type == '1'"></shu>
	</view>
</template>

<script>
	import mhuan from '../../components/mhuan.vue'
	import shu from '../../components/shu.vue'
	export default {
		components: {
			mhuan,
			shu
		},
		data() {
			return {
				type: '0',
				ys1:true,
				ys2:false,
				tabnav:[
					{
								type: '0', //状态值
								name: '漫画',
								list: [], //数据
							}, {
								type: '1', //状态值
								name: '小说',
								list: [], //数据
							}
				],
			}
		},
		onLoad() {
			console.log('jnjdjs',this.$refs)
			this.tabWid= 20
		},
		methods: {
			ontype(e){
				this.type = e.type
			    console.log(e);
			  },
			search(){
				uni.navigateTo({
					url:'../../new/serch/serch'
				})
			},
			whole(){
				this.ys1 = !this.ys1,
				this.ys2 = !this.ys2
			},
		}
	}
</script>

<style>
	body{
		background-color: #f2f3f5;
	}
	.Long{
		width: 90%;
		height: 60px;
		margin-left: 5%;
		position: fixed;
		background-color: #f2f3f5;
	}
	.wly-tabnav{
		width: 40% !important;
		position: absolute !important;
		left: 32% !important;
	}
	.search{
		width: 20%;
		height: 50px;
		position: absolute;
		top: 22%;
		left: 5%;
		background-repeat: no-repeat;
		background-size: 40%;
		background-image: url('https://bpic.51yuansu.com/pic2/cover/00/30/94/58109ad92ecef_610.jpg');
	}
	.qie{
		width: 20%;
		height: 50%;
		background-color: #e67e22;
		position: absolute;
		left: 80%;
		top: 12%;
		border-radius: 50px;
		display: flex;
		flex-direction: row;
	}
	.nan,.nv{
		width: 30%;
		height: 100%;
		text-align: center;
		padding-left: 9px;
		padding-top: 5px;
		color: #ffffff;
	}
	.type{
		font-size: 20px;
	}
	.type2{
		font-size: 16px;
	}
	.xiang{
		color: #ffffff;
		position: absolute;
		left: 30px;
		top: 5px;
	}
	/* .content{
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		width: 90%;
		margin-left: 5%;
	} */
	.ko{
		height: 60px;
		width: 100%;
	}
	
</style>
